import React ,{useState,useEffect ,Fragment}from 'react'
import axios from 'axios'
import { Sidebar, Image } from 'react-vant';
import My_content from './components/My_content';
function App() {
  const [list,setList] = useState([])
  const [num,setnum] = useState(10)
  const [listChildren,setListChildren]  = useState([])
  const [active, setActive] = useState(0);
  useEffect(()=>{
    axios.get("/list").then(res=>{
      console.log(res);
      setList(res.data.list)
      setListChildren(res.data.list[0].children)
    })
    return () =>{

    }
  },[])

  const setSidebarValue = (e) =>{
    console.log(e);
    setActive(e)
    // list[e].children
    setListChildren(list[e].children )
  }

  let my_content = {
    listChildren,
    num
  }

  return (
    <>
        <Sidebar
          value={active}
          onChange={setSidebarValue}
        >
          {
            list&&list.map((item,index)=>{
              return   <Sidebar.Item key={index} contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title={item.title}>
                <My_content {...my_content}/>
            </Sidebar.Item>
            })
          }
        </Sidebar>
    </>
  )
}

export default App
